<template>
  <div class="GreetingCard3">
    <div class="part1">
      <div class="part11-empty" v-if="!luckList.length">
        <div>
          <img class="part11-empty1" src="./img/empty.png" alt="" />
          <p>当前没有任何记录哦～</p>
        </div>
      </div>
      <div class="part11" v-for="(item, index) in luckList" :key="index">
        <div class="part11-1">
          <p class="part11-8">
            <span class="part11-3">{{ item.awardName }}</span>
            <span class="part11-4">{{ item.needPoints }}积分</span>
          </p>
          <p class="part11-5">领取时间：{{ item.orderCreateTime }}</p>
          <p class="part11-6">满{{ item.coupon_amount_max }}元可减{{ item.coupon_amount_min }}元</p>
        </div>
        <div class="part11-2">
          <span
            >￥<span class="part11-7">{{ item.awardMoney }}</span></span
          >
        </div>
      </div>
    </div>
    <div style="height: 98rpx"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      luckList: [],
    }
  },
  mounted() {
    this.activity_orders()
  },
  methods: {
    activity_orders() {
      this.$api.publicMobile
        .activity_orders({
          activityId: localStorage.activityId,
          openId: localStorage.user,
        })
        .then((res) => {
          this.luckList = res.data
          this.luckList = this.luckList.map((v1) => {
            try {
              v1.sysStock.remark = JSON.parse(v1.sysStock.remark)
              v1.coupon_amount_min = (v1.sysStock.remark.stock_use_rule.fixed_normal_coupon.coupon_amount / 100).toFixed(2)
              v1.coupon_amount_max = (v1.sysStock.remark.stock_use_rule.fixed_normal_coupon.transaction_minimum / 100).toFixed(2)

              v1.available_begin_time = this.$moment(v1.sysStock.remark.available_begin_time)
              v1.available_end_time = this.$moment(v1.sysStock.remark.available_end_time)
            } catch (error) {}
            return v1
          })
        })
        .catch((err) => {
          uni.showToast({
            icon: 'error',
            title: err.msg || '网络异常',
          })
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.GreetingCard3 {
  padding-top: 50rpx;
  .part1 {
    padding: 0 30rpx;
    .part11-empty {
      height: 80vh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #898b8d;
      font-size: 26rpx;
      line-height: 37rpx;
      .part11-empty1 {
        margin-bottom: 53rpx;
        width: 423rpx;
        height: 323rpx;
        animation: move1 infinite 2s;
      }
      @keyframes move1 {
        0% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-10px);
        }
        100% {
          transform: translateY(0);
        }
      }
    }
    .part11 {
      box-shadow: 0rpx 4rpx 30rpx 0rpx #eceff1;
      margin-bottom: 20rpx;
      background: #fff;
      border-radius: 16rpx;
      display: flex;
      align-items: center;
      .part11-1 {
        flex: 1;
        overflow: hidden;
        padding-left: 25rpx;
        font-size: 24rpx;
        line-height: 24rpx;
      }
      .part11-2 {
        width: 224rpx;
        height: 200rpx;
        background: var(--main-color);
        border-radius: 0 16rpx 16rpx 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 28rpx;
        line-height: 28rpx;
      }
      .part11-8 {
        margin-bottom: 15rpx;
        padding-left: 25rpx;
        display: flex;
        align-items: center;
      }
      .part11-3 {
        color: rgba(0, 0, 0, 0.85);
        font-size: 30rpx;
        line-height: 30rpx;
        font-weight: bold;
      }
      .part11-4 {
        background: var(--main-color);
        color: #fff;
        font-size: 20rpx;
        line-height: 38rpx;
        border-radius: 5rpx;
        padding: 0 13rpx;
        margin-left: 35rpx;
      }
      .part11-5 {
        margin-bottom: 32rpx;
        padding-left: 25rpx;
        color: #c1c1c1;
      }
      .part11-6 {
        border-top: 2rpx dashed rgba(193, 193, 193, 0.3);
        padding-top: 15rpx;
        padding-left: 25rpx;
        color: #c1c1c1;
      }
      .part11-7 {
        font-size: 38rpx;
        line-height: 38rpx;
        font-weight: bold;
      }
    }
  }
}
</style>
